.learn__side-home {
  @extend %box-neat;

  background: $c-primary;
  color: $c-primary-over;
  text-align: center;
  padding: 1em 0;

  h1 {
    font-size: 2.5em;
    margin: 0;
  }

  h2 {
    font-size: 1.8em;
    margin: 0.4em 0 1em 0;
  }

  @keyframes fat-glide {
    50% {
      transform: translateY(-4px);
    }
  }

  i.fat {
    display: block;
    width: 200px;
    height: 200px;
    background: img-url('learn/brutal-helm.svg');
    margin: auto;
    opacity: 0.8;
  }

  &:hover i.fat {
    animation: 1.2s fat-glide ease-in-out infinite;
  }

  .progress {
    position: relative;
    width: 100%;
    height: 30px;

    /* border-top: 3px solid #1566b2; */
    background: #1a7edb;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  @keyframes animatedBackground {
    from {
      background-position: 0 0;
    }

    to {
      background-position: 0 1000%;
    }
  }

  @keyframes animatedBar {
    from {
      transform: translateX(-100px);
    }

    to {
      transform: translateX(0px);
    }
  }

  .progress .bar {
    height: 100%;
    background: #1566b2;
    border-radius: 0 5px 5px 0;
    background-image: img-url('grain.png');
    transform: translateX(-100px);
    animation: animatedBackground 50s linear infinite, animatedBar 1s forwards;
  }

  .progress .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 30px;
    z-index: 3;
  }

  .actions {
    padding: 20px 10px;
    text-align: left;
  }

  a {
    opacity: 0.6;
    color: #fff;

    &:hover {
      opacity: 1;
    }
  }
}
